<template>
  <view>
    <!-- 1. 头部搜索框 -->
    <ugo-search />
    <!-- 2. tabs 选项卡 -->
    <u-tabs
      :list="[{ name: '综合' }, { name: '销量' }, { name: '价格' }]"
      lineColor="#EB4450"
      :scrollable="false"
    ></u-tabs>
    <!-- 3. 商品列表 -->
    <view class="goods-list">
      <!-- 商品列表渲染 -->
      <navigator
        class="goods-item"
        v-for="item in goodsList"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail2?goods_id=${item.goods_id}`"
      >
        <!-- 商品图片 -->
        <image
          class="goods-image"
          :src="item.goods_small_logo || defaultSrc"
          lazy-load
          mode="aspectFit"
        />
        <!-- 商品信息 -->
        <view class="goods-info">
          <view class="goods-name">{{ item.goods_name }}</view>
          <view class="goods-price">{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 底部提示 -->
    <view
      class="tips-none"
      v-if="goodsList.length !== 0 && goodsList.length === total"
    >
      我也是有底线的~
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 请求参数
      queryParams: {},
      // 商品列表
      goodsList: [],
      // 商品总数
      total: 0,
      defaultSrc:
        'https://img0.baidu.com/it/u=324754129,1809452373&fm=253&fmt=auto&app=138&f=JPEG?w=529&h=500',
    }
  },
  // 生命周期-页面加载
  onLoad(options) {
    // 初始化请求参数
    this.queryParams = {
      // 页面参数
      ...options,
      // 页码
      pagenum: 1,
      // 页容量
      pagesize: 20,
    }
    // 调用获取商品列表数据
    this.getGoodsList()
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    // 判断是否还有下一页数据
    if (this.goodsList.length < this.total) {
      console.log('页面触底了~', '✅还有数据')
      // 页码+1
      this.queryParams.pagenum++
      // 重新调用获取商品列表数据
      this.getGoodsList()
    } else {
      console.log('页面触底了~', '❌没数据了')
      // 轻提示
      uni.showToast({ icon: 'none', title: '没有数据了~' })
    }
  },
  // 监听用户下拉动作
  async onPullDownRefresh() {
    // 重置页码
    this.queryParams.pagenum = 1
    // 重置列表
    this.goodsList = []
    // 根据重置后的页码重新发请求
    await this.getGoodsList()
    // 关闭下拉刷新动画效果
    uni.stopPullDownRefresh()
  },
  methods: {
    // 获取商品列表数据
    async getGoodsList() {
      // 消息提示框 loading 图标
      uni.showToast({ icon: 'loading', title: '疯狂加载中' })
      const res = await uni.$u.http.get('/goods/search', {
        // get请求参数
        params: this.queryParams,
        // data: this.queryParams,
      })
      // 🚨注意：商品列表在 goods 字段中，加载分页数据旧数组和新数组合并
      this.goodsList.push(...res.data.message.goods)
      // 保存商品总数，用于分页加载判断
      this.total = res.data.message.total
      // 主动关闭消息提示框
      uni.hideToast()
    },
  },
}
</script>

<style lang="scss">
.goods-list {
  .goods-item {
    display: flex;
    border-bottom: 1rpx solid #ddd;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
.tips-none {
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
}
</style>
